<template>
  <div class="app-container search-table-box aidex-table">
    <el-card shadow="never" ref="queryRef" style="margin-bottom: 12px;" class="search_card" v-show="showSearch">
      <div class="filter-container">
        <div class="search_box" style="padding-bottom: 16px">
          <el-form :model="queryParams" ref="queryForm" label-width="80px" size="mini">
            <el-row :gutter="16">
              <el-col :md="8" >
                <el-form-item prop="searchValues">
                  <el-select
                    v-model="queryParams.searchValues"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    placeholder="请输入购方名称/ERP发票号/开票号码"
                    :remote-method="remoteSearchValue"
                    @change="handleQuery"
                    :loading="remoteSearchValueLoading"
                    style="width: 415px;margin-left: -78px"
                  >
                    <el-option
                      v-for="item in searchValueOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="4" >
                <el-button size="mini"  @click="toggleAdvanced" type="primary" plain style="padding: 6px 15px;">
                  {{ advanced ? '收起' : '展开' }}
                  <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </el-button>
              </el-col>
              <el-col :md="12" align="right" style="float: right;" >
                <el-form-item>
                  <el-button class="filter-item" type="danger" @click="handleQuery" style="margin-left: 10px">红冲</el-button>
                  <el-button class="filter-item" type="danger" @click="handleQuery" style="margin-left: 10px">作废</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="search_advanced_bar" v-if="advanced">
              <el-card shadow="never" >
                <el-row :gutter="16" >
<!--                  <el-col :md="6" >-->
<!--                    <el-form-item label="公司" prop="siteCode">-->
<!--                      <el-input v-model="queryParams.params.companynames" maxlength = 0 clearable placeholder="请选择公司" >-->
<!--                        <el-button slot="append" icon="el-icon-search" @click="openSearchsiteCodeDialogOpen">-->
<!--                        </el-button>-->
<!--                      </el-input>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                  <el-col :md="8" >
                    <el-form-item label="结算时间">
                      <el-date-picker
                        v-model="daterangeSettleTime"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :md="6" align="right" style="float: right;" >
                    <el-form-item>
                      <el-button class="filter-item" type="primary" @click="handleQuery">搜索</el-button>
                      <el-button class="filter-item" style="margin-left: 8px" @click="resetQuery">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="12" >
                    <el-form-item label="单据状态" prop="settlebillStatus">
                      <el-row :gutter="16">
                        <el-col :md="4" >
                          <el-checkbox v-model="checkAllSettlebillStatus" :indeterminate="isSettlebillStatusIndeterminate" label="全选" size="mini" @change="checkAll($event,'settlebillStatus')" border></el-checkbox>
                        </el-col>
                        <el-col :md="19" >
                          <el-checkbox-group v-model="queryParams.settlebillStatuses" @change="handleCheckedChange($event,'settlebillStatus')">
                            <el-checkbox v-for="dict in dict.type.settlebill_status" :label="dict.value" :key="dict.value">{{dict.label}}</el-checkbox>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                    <el-form-item label="发货时间">
                      <el-date-picker
                        v-model="daterangeDeliveryTime"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :md="12" >
                    <el-form-item label="特殊开票" prop="specialInvoice">
                      <el-input v-model="queryParams.specialInvoice" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" >
                    <el-form-item label="站点" prop="branchName">
                      <el-input v-model="queryParams.branchName" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" >
      <template #header>
        <el-row>
          <el-col :span="8">
            <div class="card-header">
              <el-button disabled type="text">待红冲信息</el-button>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="btn_box" align="right" style="float: right;">
              <el-button
                class="filter-item"
                style="margin-left: 8px;"
                icon="el-icon-delete"
                type="danger"
                :disabled="multiple"
                @click="handleDelete"
                size="mini"
                v-if="!multiple"
                v-hasPermi="['doc:settlebill:remove']"
              >删除</el-button>
              <el-button
                class="filter-item"
                style="margin-left: 8px;"
                icon="el-icon-download"
                @click="handleExport"
                size="mini"
                v-hasPermi="['doc:settlebill:export']"
              >导出</el-button>
              <right-toolbar :showSearch.sync="showSearch" :columns.sync="columns" :columnsKey.sync="columnsKey" @showSearchFun="showSearchFun" @queryTable="getList" :tableKey.sync="tableKey"></right-toolbar>
            </div>
          </el-col>
        </el-row>
      </template>

      <el-table
        border
        stripe
        default-expand-all
        ref="tableRef"
        :key="tableKey"
        v-loading="loading"
        :data="settlebillList"
        @selection-change="handleSelectionChange"
        :row-style="rowClass"
        :header-cell-style= "{
                'font-size': '14px !important',
                'font-weight': '500 !important',
                'color': 'rgb(0 0 0)',
                'background-color': 'rgb(205 224 255)',
              }"
        highlight-current-row style="width: 100%;"
        :height="tableHeight"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" align="center" width="55">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <template v-for="item in columns">
<!--          <el-table-column label="公司" align="center" prop="siteName" v-if="item.visible && item.label=='公司'" :show-overflow-tooltip="true"/>-->
          <el-table-column label="单据状态" align="center" prop="settlebillStatusName" v-if="item.visible && item.label=='单据状态'"  width="100"/>
          <el-table-column label="订单号" align="center" prop="orderNo" v-if="item.visible && item.label=='订单号'"  width="150"/>
          <el-table-column label="购方名称" align="center" prop="buyerName" v-if="item.visible && item.label=='购方名称'"  width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="发货日期" align="center" prop="deliveryTime" v-if="item.visible && item.label=='发货日期'"  width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结算时间" align="center" prop="settleTime" v-if="item.visible && item.label=='结算时间'"  width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.settleTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="源订单号" align="center" prop="sourceOrderNo" v-if="item.visible && item.label=='源订单号'"  width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="金额(不含税)" align="center" prop="feeWithoutTax" v-if="item.visible && item.label=='金额(不含税)'"  width="150"/>
          <el-table-column label="金额(含税)" align="center" prop="fee" v-if="item.visible && item.label=='金额(含税)'"  width="100"/>
          <el-table-column label="税额" align="center" prop="tax" v-if="item.visible && item.label=='税额'"  width="100"/>
          <el-table-column label="发票类型" align="center" prop="invoiceTypeName" v-if="item.visible && item.label=='发票类型'"  width="100"/>
          <el-table-column label="待销金额(不含税)" align="center" prop="pendingFeeWithoutTax" v-if="item.visible && item.label=='待销金额(不含税)'"  width="160"/>
          <el-table-column label="待销金额(含税)" align="center" prop="pendingFee" v-if="item.visible && item.label=='待销金额(含税)'"  width="160"/>
          <el-table-column label="特殊开票" align="center" prop="specialInvoice" v-if="item.visible && item.label=='特殊开票'"  width="120"/>
          <el-table-column label="站点" align="center" prop="branchName" v-if="item.visible && item.label=='站点'"  width="200" :show-overflow-tooltip="true"/>
          <el-table-column label="开票人" align="center" prop="invoiceName" v-if="item.visible && item.label=='开票人'"  width="120"/>
          <el-table-column label="创建时间" align="center" prop="createTime" v-if="item.visible && item.label=='创建时间'"  width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="修改人" align="center" prop="updateBy" v-if="item.visible && item.label=='修改人'"  width="120"/>
          <el-table-column label="修改时间" align="center" prop="updateTime" v-if="item.visible && item.label=='修改时间'"  width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </template>


        <!--        <el-table-column label="结算单ID" align="center" prop="settleId" />-->
        <!--        <el-table-column label="公司代码" align="center" prop="custId" />-->
        <!--        <el-table-column label="公司代码" align="center" prop="siteCode" />-->


        <!--        <el-table-column label="订单ID" align="center" prop="orderId" />-->

        <!--        <el-table-column label="源结算单ID" align="center" prop="sourceSettleId" />-->
        <!--        <el-table-column label="源订单ID" align="center" prop="sourceOrderId" />-->



        <!--        <el-table-column label="单据状态" align="center" prop="settlebillStatus">-->
        <!--          <template slot-scope="scope">-->
        <!--            <dict-tag :options="dict.type.settlebill_status" :value="scope.row.settlebillStatus"/>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <!--        <el-table-column label="单据性质" align="center" prop="natureType">-->
        <!--          <template slot-scope="scope">-->
        <!--            <dict-tag :options="dict.type.nature_type" :value="scope.row.natureType"/>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="单据性质" align="center" prop="natureTypeName" />-->
        <!--        <el-table-column label="特定业务代码" align="center" prop="businessType">-->
        <!--          <template slot-scope="scope">-->
        <!--            <dict-tag :options="dict.type.business_type" :value="scope.row.businessType"/>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="特定业务" align="center" prop="businessTypeName" />-->
        <!--        <el-table-column label="征收类型代码" align="center" prop="collectionType">-->
        <!--          <template slot-scope="scope">-->
        <!--            <dict-tag :options="dict.type.collection_type" :value="scope.row.collectionType"/>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="征收类型" align="center" prop="collectionTypeName" />-->


        <!--        <el-table-column label="购方纳税识别号" align="center" prop="buyerNumber" />-->
        <!--        <el-table-column label="购方地址" align="center" prop="buyerAddress" />-->
        <!--        <el-table-column label="购方电话" align="center" prop="buyerTel" />-->
        <!--        <el-table-column label="购方开户行" align="center" prop="buyerBank" />-->
        <!--        <el-table-column label="购方账号" align="center" prop="buyerAccount" />-->
        <!--        <el-table-column label="购方凭证号" align="center" prop="voucherNumber" />-->

        <!--        <el-table-column label="收款人" align="center" prop="collectName" />-->
        <!--        <el-table-column label="复核人" align="center" prop="reviewName" />-->
        <!--        <el-table-column label="收票人邮箱" align="center" prop="collectMail" />-->
        <!--        <el-table-column label="收票人手机号" align="center" prop="collectMobile" />-->
        <!--        <el-table-column label="备注" align="center" prop="remark" />-->
        <!--        <el-table-column label="销方名称" align="center" prop="sellerName" />-->
        <!--        <el-table-column label="销方纳税识别号" align="center" prop="sellerNumber" />-->
        <!--        <el-table-column label="销方地址" align="center" prop="sellerAddress" />-->
        <!--        <el-table-column label="销方电话" align="center" prop="sellerTel" />-->
        <!--        <el-table-column label="销方开户行" align="center" prop="sellerBank" />-->
        <!--        <el-table-column label="销方账号" align="center" prop="sellerAccount" />-->
        <!--        <el-table-column label="合并标识" align="center" prop="mergeIdent" />-->
        <!--        <el-table-column label="开票网点" align="center" prop="invoiceBranchName" />-->

        <!--        <el-table-column label="ERP发票流水号" align="center" prop="erpSerialNumber" />-->

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="130" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="jumpToDetail(scope.row)"
              v-hasPermi="['doc:settlebill:edit']"
            >查看</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="jumpToUpdate(scope.row)"
              v-hasPermi="['doc:settlebill:remove']"
            >修改</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <svg-icon icon-class="search-none" style="font-size: 64px;" />
          <p>暂无数据</p>
        </div>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改结算单对话框 -->
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="720px" top="10vh" append-to-body>
        <div style="height: 490px;overflow: auto; padding: 12px 24px;">
          <el-form ref="form" size="mini" :model="form" :rules="rules" label-position="top">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="结算单ID" prop="settleId">
                  <el-input v-model="form.settleId" placeholder="请输入结算单ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司代码" prop="custId">
                  <el-input v-model="form.custId" placeholder="请输入公司代码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司" prop="siteCode">
                  <el-input
                    v-model="form.companyname"
                    maxlength = 0
                    clearable
                    readonly
                    placeholder="请选择公司代码"
                  >
                    <el-button slot="append" icon="el-icon-search" @click="opensiteCodeDialogOpen">
                    </el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司" prop="siteName">
                  <el-input v-model="form.siteName" placeholder="请输入公司" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发货日期" prop="deliveryTime">
                  <el-date-picker clearable
                                  style="width: 100%;"
                                  v-model="form.deliveryTime"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择发货日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结算时间" prop="settleTime">
                  <el-date-picker clearable
                                  style="width: 100%;"
                                  v-model="form.settleTime"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择结算时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单ID" prop="orderId">
                  <el-input v-model="form.orderId" placeholder="请输入订单ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单号" prop="orderNo">
                  <el-input v-model="form.orderNo" placeholder="请输入订单号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="源结算单ID" prop="sourceSettleId">
                  <el-input v-model="form.sourceSettleId" placeholder="请输入源结算单ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="源订单ID" prop="sourceOrderId">
                  <el-input v-model="form.sourceOrderId" placeholder="请输入源订单ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="源订单号" prop="sourceOrderNo">
                  <el-input v-model="form.sourceOrderNo" placeholder="请输入源订单号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票类型" prop="invoiceType">
                  <el-select v-model="form.invoiceType" placeholder="请选择发票类型" clearable filterable style="width: 100%;">
                    <el-option
                      v-for="dict in dict.type.invoice_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发票类型" prop="invoiceTypeName">
                  <el-input v-model="form.invoiceTypeName" placeholder="请输入发票类型" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额(不含税)" prop="feeWithoutTax">
                  <el-input v-model="form.feeWithoutTax" placeholder="请输入金额(不含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="金额(含税)" prop="fee">
                  <el-input v-model="form.fee" placeholder="请输入金额(含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="税额" prop="tax">
                  <el-input v-model="form.tax" placeholder="请输入税额" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="待销金额(不含税)" prop="pendingFeeWithoutTax">
                  <el-input v-model="form.pendingFeeWithoutTax" placeholder="请输入待销金额(不含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="待销金额(含税)" prop="pendingFee">
                  <el-input v-model="form.pendingFee" placeholder="请输入待销金额(含税)" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据状态" prop="settlebillStatus">
                  <el-radio-group v-model="form.settlebillStatus">
                    <el-radio-button
                      v-for="dict in dict.type.settlebill_status"
                      :key="dict.value"
                      :label="parseInt(dict.value)"
                    >{{dict.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据状态" prop="settlebillStatusName">
                  <el-input v-model="form.settlebillStatusName" placeholder="请输入单据状态" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据性质" prop="natureType">
                  <el-select v-model="form.natureType" placeholder="请选择单据性质" clearable filterable style="width: 100%;">
                    <el-option
                      v-for="dict in dict.type.nature_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据性质" prop="natureTypeName">
                  <el-input v-model="form.natureTypeName" placeholder="请输入单据性质" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特定业务代码" prop="businessType">
                  <el-select v-model="form.businessType" placeholder="请选择特定业务代码" clearable filterable style="width: 100%;">
                    <el-option
                      v-for="dict in dict.type.business_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特定业务" prop="businessTypeName">
                  <el-input v-model="form.businessTypeName" placeholder="请输入特定业务" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="征收类型代码" prop="collectionType">
                  <el-select v-model="form.collectionType" placeholder="请选择征收类型代码" clearable filterable style="width: 100%;">
                    <el-option
                      v-for="dict in dict.type.collection_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="征收类型" prop="collectionTypeName">
                  <el-input v-model="form.collectionTypeName" placeholder="请输入征收类型" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特殊开票" prop="specialInvoice">
                  <el-input v-model="form.specialInvoice" placeholder="请输入特殊开票" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购方名称" prop="buyerName">
                  <el-input v-model="form.buyerName" placeholder="请输入购方名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购方纳税识别号" prop="buyerNumber">
                  <el-input v-model="form.buyerNumber" placeholder="请输入购方纳税识别号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购方地址" prop="buyerAddress">
                  <el-input v-model="form.buyerAddress" placeholder="请输入购方地址" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购方电话" prop="buyerTel">
                  <el-input v-model="form.buyerTel" placeholder="请输入购方电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购方开户行" prop="buyerBank">
                  <el-input v-model="form.buyerBank" placeholder="请输入购方开户行" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购方账号" prop="buyerAccount">
                  <el-input v-model="form.buyerAccount" placeholder="请输入购方账号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购方凭证号" prop="voucherNumber">
                  <el-input v-model="form.voucherNumber" placeholder="请输入购方凭证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开票人" prop="invoiceName">
                  <el-input v-model="form.invoiceName" placeholder="请输入开票人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收款人" prop="collectName">
                  <el-input v-model="form.collectName" placeholder="请输入收款人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="复核人" prop="reviewName">
                  <el-input v-model="form.reviewName" placeholder="请输入复核人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收票人邮箱" prop="collectMail">
                  <el-input v-model="form.collectMail" placeholder="请输入收票人邮箱" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收票人手机号" prop="collectMobile">
                  <el-input v-model="form.collectMobile" placeholder="请输入收票人手机号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" placeholder="请输入备注" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方名称" prop="sellerName">
                  <el-input v-model="form.sellerName" placeholder="请输入销方名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方纳税识别号" prop="sellerNumber">
                  <el-input v-model="form.sellerNumber" placeholder="请输入销方纳税识别号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方地址" prop="sellerAddress">
                  <el-input v-model="form.sellerAddress" placeholder="请输入销方地址" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方电话" prop="sellerTel">
                  <el-input v-model="form.sellerTel" placeholder="请输入销方电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方开户行" prop="sellerBank">
                  <el-input v-model="form.sellerBank" placeholder="请输入销方开户行" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销方账号" prop="sellerAccount">
                  <el-input v-model="form.sellerAccount" placeholder="请输入销方账号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合并标识" prop="mergeIdent">
                  <el-input v-model="form.mergeIdent" placeholder="请输入合并标识" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开票网点" prop="invoiceBranchName">
                  <el-input v-model="form.invoiceBranchName" placeholder="请输入开票网点" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="站点" prop="branchName">
                  <el-input v-model="form.branchName" placeholder="请输入站点" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="ERP发票流水号" prop="erpSerialNumber">
                  <el-input v-model="form.erpSerialNumber" placeholder="请输入ERP发票流水号" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-divider content-position="center">结算单明细项信息</el-divider>
              </el-col>
              <el-col :span="24">
                <el-button type="primary" icon="el-icon-plus" @click="handleAddTScSettlebillEntry">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteTScSettlebillEntry">删除</el-button>
              </el-col>
              <el-col :span="24">
                <el-table :data="tScSettlebillEntryList" :row-class-name="rowTScSettlebillEntryIndex" @selection-change="handleTScSettlebillEntrySelectionChange" style="width: 100%" height="300px" ref="tScSettlebillEntry">
                  <el-table-column type="selection" width="50" align="center" />
                  <el-table-column label="序号" align="center" prop="index" width="50"/>
                  <el-table-column label="开票项ID" prop="entryId" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.entryId" placeholder="请输入开票项ID" />
                    </template>
                  </el-table-column>
                  <el-table-column label="公司代码" prop="custId" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.custId" placeholder="请输入公司代码" />
                    </template>
                  </el-table-column>
                  <el-table-column label="公司代码" prop="siteCode" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.siteCode" placeholder="请输入公司代码" />
                    </template>
                  </el-table-column>
                  <el-table-column label="公司" prop="siteName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.siteName" placeholder="请输入公司" />
                    </template>
                  </el-table-column>
                  <el-table-column label="单位" prop="unit" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.unit" placeholder="请输入单位" />
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" prop="qty" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.qty" placeholder="请输入数量" />
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(不含税)" prop="withoutPrice" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.withoutPrice" placeholder="请输入单价(不含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(不含税)" prop="withoutAmount" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.withoutAmount" placeholder="请输入金额(不含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="税率" prop="taxRate" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.taxRate" placeholder="请输入税率" />
                    </template>
                  </el-table-column>
                  <el-table-column label="税额" prop="tax" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.tax" placeholder="请输入税额" />
                    </template>
                  </el-table-column>
                  <el-table-column label="扣除额" prop="deductAmount" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.deductAmount" placeholder="请输入扣除额" />
                    </template>
                  </el-table-column>
                  <el-table-column label="折扣率" prop="deductRate" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.deductRate" placeholder="请输入折扣率" />
                    </template>
                  </el-table-column>
                  <el-table-column label="折扣金额(含税)" prop="discountAmount" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.discountAmount" placeholder="请输入折扣金额(含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="单价(含税)" prop="price" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.price" placeholder="请输入单价(含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(含税)" prop="amount" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.amount" placeholder="请输入金额(含税)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="优惠政策类型代码" prop="policyCode" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.policyCode" placeholder="请输入优惠政策类型代码" />
                    </template>
                  </el-table-column>
                  <el-table-column label="优惠政策类型" prop="policyName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.policyName" placeholder="请输入优惠政策类型" />
                    </template>
                  </el-table-column>
                  <el-table-column label="免税类型代码" prop="freeTaxType" width="150">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.freeTaxType" placeholder="请选择免税类型代码">
                        <el-option label="请选择字典生成" value="" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="免税类型" prop="freeTaxTypeName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.freeTaxTypeName" placeholder="请输入免税类型" />
                    </template>
                  </el-table-column>
                  <el-table-column label="项目名称" prop="taxShortName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.taxShortName" placeholder="请输入项目名称" />
                    </template>
                  </el-table-column>
                  <el-table-column label="货物及服务编码" prop="productCode" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.productCode" placeholder="请输入货物及服务编码" />
                    </template>
                  </el-table-column>
                  <el-table-column label="货物及服务名称" prop="productName" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.productName" placeholder="请输入货物及服务名称" />
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" prop="specificatCode" width="150">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.specificatCode" placeholder="请输入规格型号" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary"  size="mini" @click="submitForm">确 定</el-button>
          <el-button  size="mini" @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 查询条件-公司-弹出查询 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="查询条件-公司查询" :visible.sync="searchsiteCodeDialogOpen" width="800px" append-to-body>
        <div class="dialog_box" style="height:550px;">
          <el-form label-position="left" :model="searchsiteCodeQueryParams" :inline="true"  ref="searchsiteCodeQueryForm" label-width="88px" >
            <el-form-item  prop="searchsiteCodeSearchValue">
              <el-input
                v-model="searchsiteCodeQueryParams.searchValue"
                size="mini"
                placeholder="请输入编码或名称查询公司"
                @keyup.enter.native="handleSearchsiteCodeQuery"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchsiteCodeQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="searchsiteCodeSelectLoading" :data="searchsiteCodeList"
                    height="400"
                    @row-click="handleSearchsiteCodeRowClick"
                    ref="searchsiteCodeMultipleTable"
                    :row-key="getSearchsiteCodeListRowKey"
                    :row-style="{height:2+'px'}"
                    :header-cell-style= "{
                        'font-size': '14px !important',
                        'font-weight': '500 !important',
                        'background-color':'rgb(241 241 241 / 52%)'
                      }"
                    :cell-style="{padding:'2px 4px'}"
                    border
                    @selection-change="handleSearchsiteCodeSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <!-- 数据 -->
            <el-table-column prop="siteCode" label="组织编码" width="180"></el-table-column>
            <el-table-column prop="siteName" label="组织名称" ></el-table-column>
            <el-table-column prop="propertyTypeName" label="性质" width="150"></el-table-column>
          </el-table>
          <pagination
            v-show="searchsiteCodeTotal>0"
            :total="searchsiteCodeTotal"
            :page.sync="searchsiteCodeQueryParams.pageNum"
            :limit.sync="searchsiteCodeQueryParams.pageSize"
            @pagination="getSearchsiteCodeList"
          />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="confirmSearchsiteCode">确 定</el-button>
          <el-button size="mini"   @click="searchsiteCodeCancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 编辑-公司-弹出查询 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="编辑结算单-公司选择" :visible.sync="siteCodeDialogOpen" width="800px" append-to-body>
        <div class="dialog_box" style="height:550px;">
          <el-form label-position="left" :model="siteCodeQueryParams" :inline="true"  ref="siteCodeQueryForm" label-width="88px" >
            <el-form-item  prop="siteCodeSearchValue">
              <el-input
                v-model="siteCodeQueryParams.searchValue"
                size="mini"
                placeholder="请输入编码或名称查询公司"
                @keyup.enter.native="handlesiteCodeQuery"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handlesiteCodeQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="siteCodeSelectLoading" :data="siteCodeList"
                    height="400"
                    @row-click="handlesiteCodeRowClick"
                    ref="siteCodeSingleTable"
                    :row-key="getsiteCodeListRowKey"
                    :row-style="{height:2+'px'}"
                    :header-cell-style= "{
                        'font-size': '14px !important',
                        'font-weight': '500 !important',
                        'background-color':'rgb(241 241 241 / 52%)'
                      }"
                    :cell-style="{padding:'2px 4px'}"
                    border
                    @selection-change="handlesiteCodeSelectionChange">
            <el-table-column label="选择" width="60">
              　　　　<template slot-scope="scope">
              　　　　　　<el-radio v-model="siteCodeDialogRadio" :label="scope.row"><i></i></el-radio>
              　　　　</template>
              　　 </el-table-column>
            <!-- 数据 -->
            <el-table-column prop="companycode" label="公司代码" width="180"></el-table-column>
            <el-table-column prop="companyname" label="公司名称" ></el-table-column>
            <el-table-column prop="remark" label="备注" width="120"></el-table-column>
          </el-table>
          <pagination
            v-show="siteCodeTotal>0"
            :total="siteCodeTotal"
            :page.sync="siteCodeQueryParams.pageNum"
            :limit.sync="siteCodeQueryParams.pageSize"
            @pagination="getsiteCodeList"
          />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="confirmsiteCode">确 定</el-button>
          <el-button size="mini" @click="siteCodeCancel">取 消</el-button>
        </div>
      </el-dialog>




    </el-card>
  </div>
</template>

<script>
    import { listSettlebill, getSettlebill, delSettlebill, addSettlebill, updateSettlebill } from "@/api/doc/settlebill";
    import { listCompany as listcompany, getCompany as getcompany } from "@/api/core/company";
    /* 城市列表 **/
    import { provinceList, cityList, districtList } from "@/api/system/city";

    export default {
        name: "SettlebillTobecancel",
        dicts: ['settlebill_status', 'invoice_type', 'nature_type', 'business_type', 'collection_type'],

        data() {
            return {
                advanced: false,
                tableHeight: this.getInitTableHeight(),
                // 遮罩层
                loading: true,
                // 远程查询条件加载
                remoteSearchValueLoading: false,
                tableKey: 20,
                // 选中数组
                ids: [],
                // 子表选中数据
                checkedTScSettlebillEntry: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                //
                columnsKey: 'settlebilltobecancel',
                // 自定义列
                columns: [
                    // {
          //     key: 0,
          //     label: `公司`,
          //     visible: true
          // },
                    {
                        key: 1,
                        label: `单据状态`,
                        visible: true
                    },
                    {
                        key: 2,
                        label: `订单号`,
                        visible: true
                    },
                    {
                        key: 3,
                        label: `购方名称`,
                        visible: true
                    },
                    {
                        key: 4,
                        label: `发货日期`,
                        visible: true
                    },
                    {
                        key: 5,
                        label: `结算时间`,
                        visible: true
                    },
                    {
                        key: 6,
                        label: `源订单号`,
                        visible: true
                    },
                    {
                        key: 7,
                        label: `金额(不含税)`,
                        visible: true
                    },
                    {
                        key: 8,
                        label: `金额(含税)`,
                        visible: true
                    },
                    {
                        key: 9,
                        label: `税额`,
                        visible: true
                    },
                    {
                        key: 10,
                        label: `发票类型`,
                        visible: true
                    },
                    {
                        key: 11,
                        label: `待销金额(不含税)`,
                        visible: true
                    },
                    {
                        key: 12,
                        label: `待销金额(含税)`,
                        visible: true
                    },
                    {
                        key: 13,
                        label: `特殊开票`,
                        visible: true
                    },
                    {
                        key: 14,
                        label: `站点`,
                        visible: true
                    },
                    {
                        key: 15,
                        label: `开票人`,
                        visible: true
                    },
                    {
                        key: 16,
                        label: `创建时间`,
                        visible: true
                    },
                    {
                        key: 17,
                        label: `修改人`,
                        visible: true
                    },
                    {
                        key: 18,
                        label: `修改时间`,
                        visible: true
                    }
                ],

                // 结算单表格数据
                settlebillList: [],
                // 结算单明细项表格数据
                tScSettlebillEntryList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 修改时间时间范围
                daterangeDeliveryTime: [],
                // 修改时间时间范围
                daterangeSettleTime: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    params:{

                    },
                    searchValues: [],
                    siteCode: null,
                    invoiceType: null,
                    invoiceTypes: [],
                    invoiceNo: null,
                    invoiceCode: null,
                    invoiceDate: null,
                    printNumber: null,
                    sellerName: null,
                    sellerNumber: null,
                    buyerNumber: null,
                    buyerTel: null,
                    buyerAccount: null,
                    voucherNumber: null,
                    accountDate: null,
                    processStatus: null,
                    processStatuses: [],
                    invoiceStatus: null,
                    invoiceStatuses: [],
                    checkStatus: null,
                    checkStatuses: [],
                    collectStatus: null,
                    collectStatuses: [],
                    signStatus: null,
                    signStatuses: [],
                    matchStatus: null,
                    matchStatuses: [],
                    submitStatus: null,
                    submitStatuses: [],
                    checkCode: null,
                    erpSerialNumber: null,
                    updateBy: null,
                    updateTime: null
                },
                // 关键字查询条件
                searchValueOptions:[

                ],
                checkAllSettlebillStatus: false,
                isSettlebillStatusIndeterminate: false,



                // 表单参数
                form: {},
                // 表单校验
                rules: {
                },

                /* ======================================省市区======================================  */
                // 省
                provinceId: null,
                provinceList:[],
                // 市
                cityId: null,
                cityList:[],
                // 区
                districtId: null,
                districtList:[],

                /* ======================================查询条件-公司代码选择======================================  */
                searchsiteCodes:[],
                searchsiteCodenames:[],
                searchsiteCodeTotal: 0,
                searchsiteCodeList: [],
                searchsiteCodeDialogOpen: false,
                searchsiteCodeSelectLoading: false,
                searchsiteCodeQueryParams: {
                    searchValue: null,
                    pageNum: 1,
                    pageSize: 20,
                },
                /* ======================================编辑-公司代码选择======================================  */
                siteCodename: null,
                siteCodeTotal: 0,
                siteCodeList: [],
                siteCodeDialogRadio: null,
                siteCodeDialogOpen: false,
                siteCodeSelectLoading: false,
                siteCodeQueryParams: {
                    searchValue: null,
                    pageNum: 1,
                    pageSize: 20,
                },
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 行样式 */
            rowClass({ row, rowIndex }) {
                if (this.ids.includes(row.id)) {
                    return { background: "#d9edf7", height:'20px' };
                } else {
                    return { height:'20px'};
                }
            },
            /** 隐藏搜索按钮操作 */
            showSearchFun(isShowSearch){
                this.showSearch = isShowSearch
                let oldHeight = this.$refs.queryRef.$el.offsetHeight
                if(!isShowSearch){
                    //当前是显示状态
                    oldHeight = oldHeight + 12
                }else{
                    oldHeight = oldHeight - 12
                }
                this.$nextTick(() => (
                    this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
                ))
            },
            /** 展开按钮操作 */
            toggleAdvanced() {
                const oldHeight = this.$refs.queryRef.$el.offsetHeight
                this.advanced = !this.advanced
                this.$nextTick(() => (
                    this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
                ))
            },
            /** 查询结算单列表 */
            getList() {
                this.loading = true;
                this.queryParams.params = {};
                if (null != this.daterangeInvoiceDate && '' != this.daterangeInvoiceDate) {
                    this.queryParams.params["beginInvoiceDate"] = this.daterangeInvoiceDate[0];
                    this.queryParams.params["endInvoiceDate"] = this.daterangeInvoiceDate[1];
                } else {
                    this.queryParams.params["beginInvoiceDate"] = null;
                    this.queryParams.params["endInvoiceDate"] = null;
                }
                if (null != this.daterangeAccountDate && '' != this.daterangeAccountDate) {
                    this.queryParams.params["beginAccountDate"] = this.daterangeAccountDate[0];
                    this.queryParams.params["endAccountDate"] = this.daterangeAccountDate[1];
                } else {
                    this.queryParams.params["beginAccountDate"] = null;
                    this.queryParams.params["beginAccountDate"] = null;
                }
                if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
                    this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
                    this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
                } else {
                    this.queryParams.params["beginCreateTime"] = null;
                    this.queryParams.params["beginCreateTime"] = null;
                }
                if(this.queryParams.processStatuses.length > 0){
                    this.queryParams.params["processStatuses"] = this.queryParams.processStatuses.join(',');
                } else {
                    this.queryParams.params["processStatuses"] = null;
                }
                if(this.queryParams.invoiceTypes.length > 0){
                    this.queryParams.params["invoiceTypes"] = this.queryParams.invoiceTypes.join(',');
                } else {
                    this.queryParams.params["invoiceTypes"] = null;
                }
                this.queryParams.params["searchType"] = 'tobecancel';
                listSettlebill(this.queryParams).then(response => {
                    this.settlebillList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    settleId: null,
                    custId: null,
                    siteCode: null,
                    siteName: null,
                    deliveryTime: null,
                    settleTime: null,
                    orderId: null,
                    orderNo: null,
                    sourceSettleId: null,
                    sourceOrderId: null,
                    sourceOrderNo: null,
                    invoiceType: null,
                    invoiceTypeName: null,
                    feeWithoutTax: null,
                    fee: null,
                    tax: null,
                    pendingFeeWithoutTax: null,
                    pendingFee: null,
                    settlebillStatus: [],
                    settlebillStatusName: null,
                    natureType: null,
                    natureTypeName: null,
                    businessType: null,
                    businessTypeName: null,
                    collectionType: null,
                    collectionTypeName: null,
                    specialInvoice: null,
                    buyerName: null,
                    buyerNumber: null,
                    buyerAddress: null,
                    buyerTel: null,
                    buyerBank: null,
                    buyerAccount: null,
                    voucherNumber: null,
                    invoiceName: null,
                    collectName: null,
                    reviewName: null,
                    collectMail: null,
                    collectMobile: null,
                    remark: null,
                    sellerName: null,
                    sellerNumber: null,
                    sellerAddress: null,
                    sellerTel: null,
                    sellerBank: null,
                    sellerAccount: null,
                    mergeIdent: null,
                    invoiceBranchName: null,
                    branchName: null,
                    erpSerialNumber: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null
                };
                this.tScSettlebillEntryList = [];
                this.resetForm("form");
            },

            /* ※※ 查询 省市区 相关方法 start ※※ */
            // 获取省
            getProvinceList(){
                provinceList().then(response => {
                    this.provinceList = response.data;
                });
            },
            // 获取市
            getCityList(){
                console.log(this.provinceId);
                cityList( {"parentId" : this.provinceId } ).then(response => {
                    this.cityList = response.data;
                });
            },
            // 获取区县
            getDistrictList(){
                districtList( {"parentId" : this.cityId } ).then(response => {
                    this.districtList = response.data;
                });
            },
            // 选中省份
            handleChangeProvince(val){
                // 给表单省字段赋值
                this.form.provinceid = val;
                let province = {};
                province = this.provinceList.find((item)=>{
                    return item.id === val;
                });
                this.form.province = province.name;
                // 城市数据清空、区县数据清空;
                this.cityList = [];
                this.districtList = [];
                // 已选市、区数据清空
                this.cityId = null;
                this.districtId = null;
                // 表单城市、区县数据清空
                this.form.cityid = null;
                this.form.city = null;
                this.form.areaid = null;
                this.form.area = null;
                // 获取城市数据
                this.getCityList();
            },
            // 清空省份
            handleClearProvince(){
                // 城市数据清空、区县数据清空;
                this.cityList = [];
                this.districtList = [];
                // 已选市、区数据清空
                this.cityId = null;
                this.districtId = null;
                // 表单城市、区县数据清空
                this.form.cityid = null;
                this.form.city = null;
                this.form.areaid = null;
                this.form.area = null;
            },
            // 选中城市
            handleChangeCity(val){
                // 给表单市字段赋值
                this.form.cityid = val;
                let city = {};
                city = this.cityList.find((item)=>{
                    return item.id === val;
                });
                this.form.city = city.name;
                // 区县数据清空
                this.districtList = [];
                // 已选区县清空
                this.districtId = null;
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
                // 获取城市数据
                this.getDistrictList();
            },
            // 清空省份
            handleClearCity(){
                // 区县数据清空
                this.districtList = [];
                // 已选区县清空
                this.districtId = null;
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
            },
            // 选中区县
            handleChangeDistrict(val){
                // 给表单省字段赋值
                this.form.areaid = val;
                let district = {};
                district = this.districtList.find((item)=>{
                    return item.id === val;
                });
                this.form.area = district.name;
            },
            // 清空省份
            handleClearDistrict(){
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
            },

            /* ※※ 查询 省市区 相关方法 end ※※ */


            /* ※※ 查询 公司代码 相关方法 start ※※ */
            /** ① 弹出查询条件-公司代码 */
            openSearchsiteCodeDialogOpen(){
                this.searchsiteCodeDialogOpen = true;
                // 默认不查询
            },
            /** ② 单击行 **/
            handleSearchsiteCodeRowClick(row, column, event){
                this.$refs.searchsiteCodeSingleTable.toggleRowSelection(row);
            },
            /** ③ 行KEY **/
            getSearchsiteCodeListRowKey(row) {
                return row.companycode
            },
            /** ④ 选中公司代码 **/
            handleSearchsiteCodeSelectionChange(selection) {
                this.searchsiteCodes = selection.map(item => item.siteCode);
                this.searchsiteCodenames = selection.map(item => item.siteName);
            },
            /** ⑤ 点击查询按钮 **/
            handleSearchsiteCodeQuery(){
                this.searchsiteCodeQueryParams.pageNum = 1;
                this.getSearchsiteCodeList();
            },
            /** ⑥ 查询 **/
            getSearchsiteCodeList(){
                this.searchsiteCodeSelectLoading = true;
                listcompany(this.searchsiteCodeQueryParams).then(response => {
                    this.searchsiteCodeList = response.rows;
                    this.searchsiteCodeTotal = response.total;
                    this.searchsiteCodeSelectLoading = false;
                });
            },
            /** ⑦ 点击确认查询 **/
            confirmSearchsiteCode() {
                if(this.searchsiteCodes.length > 0){
                    this.queryParams.params.siteCodes = this.searchsiteCodes.join(',');
                    this.queryParams.params.companynames = this.searchsiteCodenames.join(',');
                }
                // 关闭查询弹出框
                this.searchsiteCodeCancel();
            },
            /** ⑧ 点击关闭查询弹出框 **/
            searchsiteCodeCancel() {
                this.searchsiteCodeDialogOpen = false;
            },
            /* ※※ 查询 公司代码 相关方法 end ※※ */

            /* ※※ 编辑 公司代码 相关方法 start ※※ */
            /** ① 弹出编辑内容-公司代码 */
            opensiteCodeDialogOpen(){
                this.siteCodeDialogOpen = true;
                this.getsiteCodeList();
            },
            /** ② 单击行 **/
            handlesiteCodeRowClick(row, column, event){
                this.$refs.siteCodeSingleTable.toggleRowSelection(row);
            },
            /** ③ 行KEY **/
            getsiteCodeListRowKey(row) {
                return row.companycode
            },
            /** ④ 选中公司代码 **/
            handlesiteCodeSelectionChange(selection) {
                if (selection[0]) {
                    this.siteCodeDialogRadio = selection[0]
                    this.form.companycode = selection[0].companycode;
                    this.form.companyname = selection[0].companyname;
                }
            },
            /** ⑤ 点击查询按钮 **/
            handlesiteCodeQuery(){
                this.siteCodeQueryParams.pageNum = 1;
                this.getsiteCodeList();
            },
            /** ⑥ 查询 **/
            getsiteCodeList(){
                this.siteCodeSelectLoading = true;
                listcompany(this.siteCodeQueryParams).then(response => {
                    this.siteCodeList = response.rows;
                    this.siteCodeTotal = response.total;
                    this.siteCodeSelectLoading = false;
                });
            },
            /** ⑦ 点击确认查询 **/
            confirmsiteCode() {
                this.siteCodeCancel();
            },
            /** ⑧ 点击关闭查询弹出框 **/
            siteCodeCancel() {
                this.siteCodeDialogOpen = false;
            },
            /* ※※ 编辑 公司代码 相关方法 end ※※ */


            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },

            /** 重置按钮操作 */
            resetQuery() {
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    params:{

                    },
                    settleId: null,
                    custId: null,
                    siteCode: null,
                    siteName: null,
                    deliveryTime: null,
                    settleTime: null,
                    orderId: null,
                    orderNo: null,
                    sourceSettleId: null,
                    sourceOrderId: null,
                    sourceOrderNo: null,
                    invoiceType: null,
                    invoiceTypeName: null,
                    feeWithoutTax: null,
                    fee: null,
                    tax: null,
                    pendingFeeWithoutTax: null,
                    pendingFee: null,
                    settlebillStatus: null,
                    settlebillStatuses: [],
                    settlebillStatusName: null,
                    natureType: null,
                    natureTypeName: null,
                    businessType: null,
                    businessTypeName: null,
                    collectionType: null,
                    collectionTypeName: null,
                    specialInvoice: null,
                    buyerName: null,
                    buyerNumber: null,
                    buyerAddress: null,
                    buyerTel: null,
                    buyerBank: null,
                    buyerAccount: null,
                    voucherNumber: null,
                    invoiceName: null,
                    collectName: null,
                    reviewName: null,
                    collectMail: null,
                    collectMobile: null,
                    sellerName: null,
                    sellerNumber: null,
                    sellerAddress: null,
                    sellerTel: null,
                    sellerBank: null,
                    sellerAccount: null,
                    mergeIdent: null,
                    invoiceBranchName: null,
                    branchName: null,
                    erpSerialNumber: null,
                };
                this.tScSettlebillEntryList = [];
                this.checkAllSettlebillStatus = false;
                this.isSettlebillStatusIndeterminate = false;
                this.daterangeDeliveryTime = [];
                this.daterangeSettleTime = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },

            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },

            /** 新增按钮操作 */
            handleAdd() {
                // this.reset();
                // this.open = true;
                // this.title = "添加结算单";
                // 需要另新增一个标签页
                this.$router.push({path:'/doc/settlebill/add',query:{date:new Date().getTime()}})
            },

            /** 跳转至详情页 */
            jumpToDetail(row){
                const settleId = row.id;
                // 需要另新增一个标签页
                this.$router.push({path:'/doc/settlebill/detail/' + settleId,query:{settleId:settleId, date:new Date().getTime()}})
            },

            /** 跳转至修改页 */
            jumpToUpdate(row){
                const settleId = row.id;
                // 需要另新增一个标签页
                this.$router.push({path:'/doc/settlebill/update/' + settleId,query:{settleId:settleId, date:new Date().getTime()}})
            },

            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                getSettlebill(id).then(response => {
                    this.form = response.data;
                    this.tScSettlebillEntryList = response.data.tScSettlebillEntryList;
                    this.open = true;
                    this.title = "修改结算单";
                });
            },

            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.form.tScSettlebillEntryList = this.tScSettlebillEntryList;
                        if (this.form.id != null) {
                            updateSettlebill(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addSettlebill(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除结算单编号为"' + ids + '"的数据项？').then(function() {
                    return delSettlebill(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            },

            /** 结算单明细项序号 */
            rowTScSettlebillEntryIndex({ row, rowIndex }) {
                row.index = rowIndex + 1;
            },

            /** 结算单明细项添加按钮操作 */
            handleAddTScSettlebillEntry() {
                let obj = {};
                obj.entryId = "";
                obj.custId = "";
                obj.siteCode = "";
                obj.siteName = "";
                obj.unit = "";
                obj.qty = "";
                obj.withoutPrice = "";
                obj.withoutAmount = "";
                obj.taxRate = "";
                obj.tax = "";
                obj.deductAmount = "";
                obj.deductRate = "";
                obj.discountAmount = "";
                obj.price = "";
                obj.amount = "";
                obj.policyCode = "";
                obj.policyName = "";
                obj.freeTaxType = "";
                obj.freeTaxTypeName = "";
                obj.taxShortName = "";
                obj.productCode = "";
                obj.productName = "";
                obj.specificatCode = "";
                this.tScSettlebillEntryList.push(obj);
            },

            /** 结算单明细项删除按钮操作 */
            handleDeleteTScSettlebillEntry() {
                if (this.checkedTScSettlebillEntry.length == 0) {
                    this.$modal.msgError("请先选择要删除的结算单明细项数据");
                } else {
                    const tScSettlebillEntryList = this.tScSettlebillEntryList;
                    const checkedTScSettlebillEntry = this.checkedTScSettlebillEntry;
                    this.tScSettlebillEntryList = tScSettlebillEntryList.filter(function(item) {
                        return checkedTScSettlebillEntry.indexOf(item.index) == -1
                    });
                }
            },

            /** 复选框选中数据 */
            handleTScSettlebillEntrySelectionChange(selection) {
                this.checkedTScSettlebillEntry = selection.map(item => item.index)
            },

            /** 导出按钮操作 */
            handleExport() {
                this.download('doc/settlebill/export', {
                    ...this.queryParams
                }, `settlebill_${new Date().getTime()}.xlsx`)
            },

            /** 动态加载关键字查询条件 */
            remoteSearchValue(query) {
                this.remoteSearchValueLoading = true;
                if (query !== '') {
                    this.searchValueOptions = [
                        {value: '购方名称:' + query ,label: '购方名称:' + query },
                        {value: 'ERP发票号:' + query ,label: 'ERP发票号:' + query },
                        {value: '开票号码:' + query ,label: '开票号码:' + query },
                        // {value: '合并标识码:' + query ,label: '合并标识码:' + query }
                    ];
                    this.searchValueOptions.map(item => {
                        this.queryParams.searchValues.map((item2, index) => {
                            if(item.value.startsWith('购方名称') && item2.startsWith('购方名称')){
                                item.disabled = true;
                            }
                            if(item.value.startsWith('ERP发票号') && item2.startsWith('ERP发票号')){
                                item.disabled = true;
                            }
                            if(item.value.startsWith('开票号码') && item2.startsWith('开票号码')){
                                item.disabled = true;
                            }
                        })
                    });
                } else {
                    this.searchValueOptions = [];
                }
                this.remoteSearchValueLoading = false;
            },

            checkAll(val, column){
                if(val){
                    switch (column) {
                        case 'settlebillStatus':
                            this.dict.type.settlebill_status.map((dict, index) => {
                                this.queryParams.settlebillStatuses.push(dict.value)
                            });
                            break;
                        case 'submitStatus':
                            this.dict.type.submit_status.map((dict, index) => {
                                this.queryParams.submitStatuses.push(dict.value)
                            });
                            break;
                    }

                } else {
                    switch (column) {
                        case 'settlebillStatus':
                            this.queryParams.settlebillStatuses = []
                            break;
                        case 'submitStatus':
                            this.queryParams.submitStatuses = []
                            break;
                    }
                }
                switch (column) {
                    case 'settlebillStatus':
                        this.isSettlebillStatusIndeterminate = false;
                        break;
                    case 'submitStatus':
                        this.isSubmitStatusIndeterminate = false;
                        break;
                }

            },

            handleCheckedChange(value, column){
                let checkedCount = value.length;
                switch (column) {
                    case 'settlebillStatus':
                        this.checkAllSettlebillStatus = checkedCount === this.dict.type.settlebill_status.length;
                        this.isSettlebillStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.settlebill_status.length;
                        break;
                    case 'submitStatus':
                        this.checkAllSubmitStatus = checkedCount === this.dict.type.submit_status.length;
                        this.isSubmitStatusIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.submit_status.length;
                        break;
                }

            }
        }
    };
</script>
